<div class="layui-row layui-col-space15" style="height: 100%;">
	<div class="layui-col-md5"  style="height: 100%;">
		<div class="layui-card" style="height: 100%;">
			<div class="layui-card-header">
		        <h2 class="header-title">字典类型列表</h2>
		        <div class="layui-btn-group" style="float: right">
		            <button class="layui-btn layui-btn-sm" id="btnAddDictType"><i class="layui-icon">&#xe654;</i> 增加</button>
		        </div>
		    </div>
		    <div class="layui-card-body" style="padding-top: 0px;">
		        <table class="layui-table" id="dict-type-table" lay-filter="dict-type-table"></table>
		    </div>
		</div>
	</div>
	<div class="layui-col-md7"  style="height: 100%;">
		<div class="layui-card" style="height: 100%;">
	    	<div class="layui-card-header">
		        <h2 class="header-title">字典数据列表</h2>
		        <div class="layui-btn-group" style="float: right">
		            <button class="layui-btn layui-btn-sm" id="btnAddDictData"><i class="layui-icon">&#xe654;</i> 增加</button>
		        </div>
		    </div>
		    <div class="layui-card-body" style="padding-top: 0px;">
		        <table class="layui-table" id="dict-data-table" lay-filter="dict-data-table"></table>
		    </div>
		</div>
	</div>
</div>

<script type="text/html" id="tblDataTypeBar">
	<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
</script>

<script type="text/html" id="tblDataDetailBar">
	<div class="layui-btn-group">
		<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
		<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
	</div>
</script>

<script>
    layui.use(['jquery', 'table', 'util', 'sadmin', 'element'], function () {
        var $ = layui.$ //重点处
        var table = layui.table;
        var util = layui.util;
        var sadmin = layui.sadmin;
        var element = layui.element;

        // 渲染字典类型表格
        table.render({
            elem: '#dict-type-table',
            url: 'system/dict/pageList',
            skin: 'line',
            page: true,
            cols: [
                [
                	{type: 'radio'},
                    {field: 'dataCode', title: '类型编码', width: 120}, 
                    {field: 'dataText', title: '类型名称'},
					{fixed: 'right', title: '操作', align: 'center', width: 100, toolbar: '#tblDataTypeBar'}
                ]
            ]
        });
        
        // 监听字典类型选中事件
        table.on('radio(dict-type-table)', function(obj){
			console.log(obj.checked); //当前是否选中状态
	       	console.log(obj.data); //选中行的相关数据
	       	console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one

          	sadmin.putTempData('parentId', obj.data.pid);
	       	table.reload('dict-data-table', {
				url: 'system/dict/pageList'
				,where: {parentId: obj.data.pid}
				,page: {
	                curr: 1 //重新从第 1 页开始
	            }
			});
       	});
        
     	// 添加字典类型点击事件
        $('#btnAddDictType').click(function () {
            showEditTypeModel();
        });
		
     	// 显示字典类型表单弹窗
        var showEditTypeModel = function (data) {
            console.log(data);
            var title = data ? '修改类型' : '添加类型';
            sadmin.putTempData('system_dict_type', data);
            sadmin.popupCenter({
                title: title,
                path: '/system/dict/form?type=CLASS',
                area: ['450px', '450px'],
                offset: 'auto',
                finish: function () {
                    table.reload('dict-type-table', {});
                }
            });
        };
        
     	// 字典类型工具条点击事件
        table.on('tool(dict-type-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
            	showEditTypeModel(data);
            }
        });

		// 渲染字典数据表格
		table.render({
			elem : '#dict-data-table',
			skin : 'line',
			url: 'system/dict/pageList',
			where: {parentId: '-1'},
			page : true,
			cols : [ 
				[
					{field: 'dataCode', align: 'center', width: 120, title: '字典码值'}, 
					{field: 'dataText', title: '字典文本' }, 
					{field: 'groupText', title: '分组名称' }, 
					{field: 'dataPxh', title: '排序号' },
					{fixed: 'right', title: '操作', align: 'center', width: 100, toolbar: '#tblDataDetailBar'}
				] 
			]
		});
		
		// 添加字典数据点击事件
        $('#btnAddDictData').click(function () {
        	var selectDictTypeRow = table.checkStatus('dict-type-table');
            if (selectDictTypeRow.data.length == 0) {
            	layer.msg("请选择字典类型");
            	return;
            }
            showEditModel();
        });
		
     	// 显示字典数据表单弹窗
        var showEditModel = function (data) {
            console.log(data);
            var title = data ? '修改数据' : '添加数据';
            sadmin.putTempData('system_dict_data', data);
            sadmin.popupCenter({
                title: title,
                path: '/system/dict/form?type=ITEM',
                area: ['560px', '560px'],
                offset: 'auto',
                finish: function () {
                    table.reload('dict-data-table', {});
                }
            });
        };
        
     	// 字典数据工具条点击事件
        table.on('tool(dict-data-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            }
            else if (layEvent === 'del') { //删除
            	deleteDictByPid(data, 2);
            }
        });
     	
     	// 删除字典列表数据
        var deleteDictByPid = function(data, flag) {
        	layer.confirm('确定删除所选数据吗？', function (i) {
                layer.close(i);
                layer.load(2);
                $.post('system/dict/drop', {
                    dataPid: data.pid
                }, function (result) {
                    layer.closeAll('loading');
                    layer.msg(result.msg);
                    if (flag == 1) {
                    	table.reload('dict-type-table', {});
                    }
                    else {
                    	table.reload('dict-data-table', {});
                    }
                });
            });
        }
	});
</script>